import Taro, { Component } from '@tarojs/taro'
import { View , Text , Image} from '@tarojs/components';
import { baseImgSrc } from '../../util/base_url';
import { getMyOrder } from '../../util/api';
import Nodata from '../../components/nodata/nodata';
import './orderlist.scss';
export default class OrderList extends Component {
    config = {
        navigationBarTitleText:"订单中心",
    }
    constructor(){
        super(...arguments)
        this.state = {
            type:1,
            list:[],
            needShow:false,
        }
    }
    componentWillMount(){
        let { type  = 1} = this.$router.params;
        this.setState({type},() => {
            this.getList();
        })
        Taro.eventCenter.on('refreshOrderList',() => {
            this.setState({list:[]},() => {
                this.getList();
            })
        })
    }
    getList(){
        let { type } = this.state;
        getMyOrder({type}).then( res => {
            if(res.code == 0){
                this.setState({list:res.data},() => {
                    this.setState({needShow:this.state.list.length == 0 });
                })
            }else{
                this.setState({list:[],needShow:true})
            }
        })
    }
    changeType(type){
        this.setState({type,list:[]},() => {
            this.getList();
        })
    }
    toOrderDtl(id){
        Taro.navigateTo({
            url:`/pages/orderdtl/orderdtl?id=${id}&type=${this.state.type}`
        })
    }
    render(){
        let { type , list , needShow} = this.state;
        return(
            <View className='orderlist'>
                <View className='tab-list flex align-items space-between'>
                    <View className={'item fn-ctr '+(type == 1 ? 'active' : '')} onClick={this.changeType.bind(this,1)}>
                        <Text className='txt'>发布中</Text>
                        <View className='line'></View>
                    </View> 
                    <View className={'item fn-ctr '+(type == 2 ? 'active' : '')} onClick={this.changeType.bind(this,2)}>
                        <Text className='txt'>等待中</Text>
                        <View className='line'></View>
                    </View>
                    <View className={'item fn-ctr '+(type == 3 ? 'active' : '')} onClick={this.changeType.bind(this,3)}>
                        <Text className='txt'>进行中</Text>
                        <View className='line'></View>
                    </View>
                    <View className={'item fn-ctr '+(type == 4 ? 'active' : '')} onClick={this.changeType.bind(this,4)}>
                        <Text className='txt'>已完成</Text>
                        <View className='line'></View>
                    </View>
                </View>
                <View className='list'>
                    {
                        list.map( (v,i) => (
                            <View className='item' onClick={this.toOrderDtl.bind(this,v.id)}>
                                <View className='top flex align-items space-between'>
                                    <Image className='time-image' src={`${baseImgSrc}/index_time.png`} />
                                    <View className='right flex1 flex align-items space-between'>
                                        <Text className='time-txt'>{v.start_time}</Text>
                                        <View className='more flex align-items flex-end'>
                                            <Text className='status'>{v.state}</Text>
                                            <Text className='iconfont iconarrow-right'></Text>
                                        </View>
                                    </View>
                                </View>
                                <View className='ot-item flex align-items space-between'>
                                    <Image className='ot-img' src={`${baseImgSrc}/address_fa.png`} />
                                    <View className='ot-txt ell1 flex1'>{v.address}</View>
                                </View>
                                <View className='ot-item flex align-items space-between'>
                                    <Image className='ot-img' src={`${baseImgSrc}/address_dao.png`} />
                                    <View className='ot-txt ell1 flex1'>{v.go_address}</View>
                                </View>
                            </View>
                        ))
                    }
                    <Nodata needShow={needShow} />
                </View>
            </View>
        )
    }
}